<template>
<div style="position: relative;"> <!-- 解决z-index的问题 -->
  <div class="header-wrapper"
    :style="{paddingTop: paddingTop + 'px',
    position: fixed ? 'fixed' : 'relative',
    color: fontColor,
    background: customBackground
    }">
      <div :style="{
        backgroundImage: showBackground ? 'url(' + headerBg + ')' : 'none',
        opacity: opacity }"
        style="position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%;">
      </div>
      <div class="header">
        <div class="left" @click.stop="back">
          <slot name="left">
            <i class="fa fa-angle-left" aria-hidden="true"></i>
          </slot>
        </div>
        <div class="title">
          <slot name="main">
            {{title}}
          </slot>
        </div>
        <div class="right">
          <slot name="right"></slot>
        </div>
      </div>
  </div>
</div>
</template>

<script>
import headerBg from '@/assets/img/header_bg.png'
import { isIphoneX } from '@/assets/js/brower'

export default {
  props: {
    headerBg: {
      type: String,
      default: headerBg
    },
    title: {
      type: String,
      default: ''
    },
    fontColor: {
      type: String,
      default: '#fff'
    },
    opacity: {
      type: Number,
      default: 1
    },
    showBackground: {
      type: Boolean,
      default: true
    },
    customBackground: {
      type: String,
      default: null
    },
    fixed: {
      type: Boolean,
      default: false
    },
    handleClick: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      paddingTop: 0
    }
  },
  created () {
    if (isIphoneX()) {
      this.paddingTop = 34
    } else {
      this.paddingTop = 24
    }
  },
  methods: {
    back () {
      this.$emit('back')
      if (!this.handleClick) {
        window.history.length === 0 ? this.$router.replace('/') : this.$router.go(-1)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.header-wrapper {
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  .header{
    position: relative;
    font-size: $font-size-large;
    height: 40px;
    padding-left: 72px;
    padding-right: 72px;
    overflow: hidden;
    .left {
      position: absolute;
      left: 6px;
      top: -4px;
      font-size: 27px;
      padding: 8px 12px;
      margin-top: 3px;
      line-height: 1;
      height: 100%;
      line-height: 100%;
      text-align: center;
    }
    .title {
      line-height: 40px;
      text-align: center;
      width: 100%;
      height: 100%;
    }
    .right {
      position: absolute;
      right: 15px;
      top: 5.5px;
    }
  }
}
</style>
